<template>
    <div class="app-container">
  
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input v-model="listQuery.companyName" size="mini" clearable class="filter-item" style="width: 200px;" placeholder="请输入公司名称"/>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
        <el-button   class="filter-item" size="mini" type="primary" icon="el-icon-edit" @click="handleCreate">新增配置</el-button>
        <el-button   class="filter-item" size="mini" type="primary" icon="el-icon-refresh" @click="refreshConfig">刷新缓存</el-button>
      </div>
  
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
        <!-- <el-table-column align="center" label="ID" prop="id" sortable/> -->
  
        <el-table-column align="center" label="公司名称" prop="companyName" />
        <el-table-column align="center" label="支付平台" prop="payCertificateType" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.payCertificateType==1">支付宝</el-tag>
            <el-tag v-if="scope.row.payCertificateType==2" type="success">微信</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否默认支付方式" prop="isDefault" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDefault==1">是</el-tag>
            <el-tag v-if="scope.row.isDefault==0" type="info">否</el-tag>
          </template>
        </el-table-column>
  
        <el-table-column align="center" label="操作" >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <el-button
                    size="mini"
                    circle type="primary"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                   
              />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button
                    size="mini"
                    circle type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    
              />
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
  
      <!-- 添加卡话框 -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="80%">
        <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="right" label-width="150px" style="margin-left:50px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="支付平台" prop="payCertificateType" >
                <el-radio v-model="dataForm.payCertificateType" label="1" @change="changeType">支付宝</el-radio>
                <el-radio v-model="dataForm.payCertificateType" label="2" @change="changeType">微信</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="dataForm.companyName" style="width:70%"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否为默认支付" prop="isDefault">
                <el-radio v-model="dataForm.isDefault" label="1">是</el-radio>
                <el-radio v-model="dataForm.isDefault" label="0">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left" v-if="dataForm.payCertificateType=='1'">支付宝</el-divider>
          <el-divider content-position="left" v-if="dataForm.payCertificateType=='2'">微信</el-divider>
          <div v-if="dataForm.payCertificateType=='1'">
            <el-row >
              <el-col :span="12">
                <el-form-item label="APPID" prop="alipayAppid">
                  <el-input v-model="dataForm.alipayAppid" style="width:70%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户私钥" prop="alipayPrivateKey">
                  <el-input v-model="dataForm.alipayPrivateKey"  style="width:70%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="应用公钥证书地址" prop="alipayAppCertPath">
                  <el-input v-model="dataForm.alipayAppCertPath" style="width:70%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付公钥证书地址" prop="alipayCertPath">
                  <el-input v-model="dataForm.alipayCertPath" style="width:70%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="支付公钥根证书地址" prop="alipayRootCertPath">
                  <el-input v-model="dataForm.alipayRootCertPath" style="width:70%"/>
                </el-form-item>
              </el-col>
                <el-col :span="12">
                  <el-form-item label="卖家ID" prop="alipaySellerId">
                    <el-input v-model="dataForm.alipaySellerId" style="width:70%"/>
                  </el-form-item>
                </el-col>
            </el-row>
          </div>
          <div v-if="dataForm.payCertificateType=='2'">
            <el-row >
              <el-col :span="12">
                <el-form-item label="商户号" prop="wechatMerchantNo">
                  <el-input v-model="dataForm.wechatMerchantNo" style="width:70%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商户秘钥" prop="wechatMerchantSecret">
                  <el-input v-model="dataForm.wechatMerchantSecret" style="width:70%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="服务号APPID" prop="wechatServerAppid">
                  <el-input v-model="dataForm.wechatServerAppid" style="width:70%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务号秘钥" prop="wechatServerSecret">
                  <el-input v-model="dataForm.wechatServerSecret" style="width:70%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="小程序APPID" prop="wechatSmallAppid">
                  <el-input v-model="dataForm.wechatSmallAppid" style="width:70%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="小程序秘钥" prop="wechatSmallSecret">
                  <el-input v-model="dataForm.wechatSmallSecret" style="width:70%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证书路径" prop="wechatCert">
                  <el-input v-model="dataForm.wechatCert" style="width:70%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开发平台APPID" prop="wechatOpenAppid">
                  <el-input v-model="dataForm.wechatOpenAppid" style="width:70%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开发平台秘钥" prop="wechatOpenSecret">
                  <el-input v-model="dataForm.wechatOpenSecret" style="width:70%"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button v-if="dialogStatus == 'create'"  type="primary" @click="createData">确定</el-button>
          <el-button v-else @click="updateData" type="primary">确定</el-button>
        </div>
      </el-dialog>
  
  
      
  
    </div>
  </template>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
  .el-dialog__body{
      padding: 10px 20px;
  }
  </style>
  
  <script>
  import { payList,payAdd,payUpdate,payDelete,refreshConfigCache } from '@/api/pay/payPlatformConfig'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  
  export default {
    name: 'payplatformConfig',
    components: { Pagination },
    data() {
      var checkNumber = (rule, value,callback) => {
          const regex = /(^[1-9]\d*$)/;
          if(!regex.test(value)){
              return callback(new Error('请输入正确正整数'))
          }else{
              callback()
          }
      }
      return {
        list: null,
        cardList:null,
        total: 0,
        detailsTotal:0,
        roleOptions: null,
        listLoading: true,
        detailsListLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          keyName: undefined
        },
        detailsListQuery: {
          pageNum: 1,
          pageSize: 10,
          keyName: undefined
        },
        dataForm: {
          id: undefined,
          payCertificateType: '1',
          companyName: undefined,
          wechatMerchantNo:undefined,
          wechatMerchantSecret:undefined,
          wechatServerAppid:undefined,
          wechatServerSecret:undefined,
          wechatSmallAppid:undefined,
          wechatSmallSecret:undefined,
          alipayAppid:undefined,
          alipayPrivateKey:undefined,
          alipayAppCertPath:undefined,
          alipayCertPath:undefined,
          alipayRootCertPath:undefined,
          isDefault:'0',
          isValid:undefined
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        rules: {
          cardName: [{ required: true, message: '请填写红包卡名称', trigger: 'blur' }],
          cardAmount: [{ required: true, message: '请填写红包卡额度', trigger: 'blur' },{validator: checkNumber, trigger: 'blur' }],
          cardNumber: [{ required: true, message: '请填写制卡数量', trigger: 'blur' },{validator: checkNumber, trigger: 'blur' }]
        },
        downloadLoading: false,
        dialogCardFormVisible: false
      }
    },
    
    created() {
      this.getList()
    },
    methods: {
      refreshConfig(){
        refreshConfigCache({}).then(resp=>{
          this.$notify.success({title: '成功',message: '刷新成功'})
        })
      },
      changeType(){//切换类型清空数据
        if(this.dataForm.payCertificateType==1){
          this.dataForm.wechatMerchantNo=null
          this.dataForm.wechatMerchantSecret=null
          this.dataForm.wechatServerAppid=null
          this.dataForm.wechatServerSecret=null
          this.dataForm.wechatSmallAppid=null
          this.dataForm.wechatSmallSecret=null
        }else{
          this.dataForm.alipayAppid=null
          this.dataForm.alipayPrivateKey=null
          this.dataForm.alipayAppCertPath=null
          this.dataForm.alipayCertPath=null
          this.dataForm.alipayRootCertPath=null
  
  
        }
      },
      getList() {
        this.listLoading = true
        payList(this.listQuery).then(response => {
            this.list = response.data.list
            this.total = response.data.total
            this.listLoading = false
          })
      },
      handleFilter() {
        this.listQuery.pageNum = 1
        this.getList()
      },
      resetForm() {
        this.dataForm = {
          id: undefined,
          payCertificateType: '1',
          companyName: undefined,
          wechatMerchantNo:undefined,
          wechatMerchantSecret:undefined,
          wechatServerAppid:undefined,
          wechatServerSecret:undefined,
          wechatSmallAppid:undefined,
          wechatSmallSecret:undefined,
          alipayAppid:undefined,
          alipayPrivateKey:undefined,
          alipayAppCertPath:undefined,
          alipayCertPath:undefined,
          alipayRootCertPath:undefined,
          isDefault:'0',
          isValid:undefined
        }
      },
      uploadAvatar: function(response) {
        this.dataForm.avatar = response.data.url
      },
      handleCreate() {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
  
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            payAdd(this.dataForm).then(response => {
                this.dialogFormVisible = false
                this.msgSuccess("添加成功");
                this.getList()
            })
          }
        })
      },
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            payUpdate(this.dataForm).then(() => {
                this.dialogFormVisible = false
                this.msgSuccess("更新成功");
                this.getList()
              })
          }
        })
      },
      handleDelete(row) {
        this.$confirm('您确认要删除吗？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消'
          }).then(() => {
            payDelete(row).then(response => {
                this.msgSuccess("删除成功");
                this.getList()
              })
              
          })
      }
    }
  }
  </script>
  